<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JM航空</title>
    <link rel="stylesheet" href="../static/element-ui/lib/theme-chalk/index.css"/>
    <link rel="stylesheet" href="../static/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="../static/font/icon/iconfont.css">
    <link rel="stylesheet" href="../static/css/index.css"/>
</head>
<body>
<div id="appSearch">
    <el-menu mode="horizontal" :default-active="activeIndex" active-text-color="#409EFF">
        <el-menu-item index="0" id="logo">JM航空&nbsp;&nbsp;&nbsp; <span
                class="fa fa-plane fa-2x"></span></el-menu-item>
        <el-menu-item index="1"><a href="orderNav0.html">机票预订</a></el-menu-item>
        <el-menu-item index="2"><a href="">航班查询</a></el-menu-item>
        <el-menu-item id="user" index="3">
            <img class="el-tooltip" src="../static/image/flag.png"/>
            <el-dropdown>
                <span class="el-dropdown-link">{{userChName}}<i class="el-icon-arrow-down el-icon--right"></i></span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item><a href="userCenter.html">我的订单</a>
                    </el-dropdown-item>
                    <el-dropdown-item><a href="https://github.com/Xiant999/AirSystem" target="_blank">GitHub</a>
                    </el-dropdown-item>
                    <el-dropdown-item divided><a href="/AirSystem_war_exploded/logout">退出</a></el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-menu-item>
    </el-menu>

    <div id="main">
        <el-col>
            <el-card shadow="always">
                <div class="myCard">

                    <el-row>
                        <el-radio-group v-model="choice">
                            <el-radio-button label="按航班线路"></el-radio-button>
                            <el-radio-button label="按航班号"></el-radio-button>
                        </el-radio-group>
                    </el-row>
                    <br><br>


                    <!--form1-->
                    <el-form :inline="true" :model="searchEntity" ref="searchEntity"
                             :rules="rules" v-show="choice=='按航班线路'">
                        <el-form-item prop="stCity">
                            <el-cascader
                                    :props="{ value:'label',expandTrigger:'hover'}"
                                    :options="citys"
                                    v-model="searchEntity.stCity"
                                    :show-all-levels="false"
                                    placeholder="出发城市">
                            </el-cascader>
                        </el-form-item>

                        <el-form-item>
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle-thin fa-stack-2x"></i>
                                <i class="fa fa-exchange fa-stack-1x"></i>
                            </span>
                        </el-form-item>
                        <el-form-item prop="edCity">
                            <el-cascader
                                    :props="{ value:'label',expandTrigger:'hover'}"
                                    :options="citys"
                                    v-model="searchEntity.edCity"
                                    :show-all-levels="false"
                                    placeholder="到达城市">
                            </el-cascader>
                        </el-form-item>
                        &nbsp;&nbsp;
                        <el-form-item prop="planTime">
                            <el-date-picker
                                    v-model="searchEntity.planTime"
                                    align="right"
                                    type="date"
                                    placeholder="选择日期"
                                    format="yyyy 年 MM 月 dd 日"
                                    value-format="yyyy-MM-dd"
                                    :picker-options="pickerOptions">
                            </el-date-picker>
                        </el-form-item>
                        &nbsp;&nbsp;
                        <el-form-item>
                            <el-button
                                    type="primary"
                                    icon="el-icon-search"
                                    @click="search('searchEntity')">查询
                            </el-button> &nbsp;&nbsp;
                            <el-button
                                    icon="el-icon-delete"
                                    @click="searchEntity={}"
                                    type="primary" plain>清空
                            </el-button>
                        </el-form-item>
                    </el-form>

                    <!--form2-->
                    <el-row v-show="choice=='按航班号'">
                        <el-form :inline="true" :model="searchEntity2"
                                 ref="searchEntity2" label-width="150px" status-icon>
                            <el-form-item label="航班号" prop="flightsId"
                                          :rules="[{ required: true, message: '航班号不能为空'}]" required>
                                <el-input v-model="searchEntity2.flightsId"></el-input>
                            </el-form-item>
                            <el-form-item label="出发时间" prop="searchDate"
                                          :rules="[{ required: true, message: '时间不能为空'}]" required>
                                <el-date-picker
                                        v-model="searchEntity2.searchDate"
                                        align="right"
                                        type="date"
                                        placeholder="选择日期"
                                        format="yyyy 年 MM 月 dd 日"
                                        value-format="yyyy-MM-dd"
                                        :picker-options="pickerOptions">
                                </el-date-picker>
                            </el-form-item>
                            &nbsp;&nbsp;
                            <el-form-item>
                                <el-button
                                        type="primary"
                                        icon="el-icon-search"
                                        @click="search('searchEntity2')">查询
                                </el-button> &nbsp;&nbsp;
                                <el-button
                                        icon="el-icon-delete"
                                        @click="searchEntity2={}"
                                        type="primary" plain>清空
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </el-row>
                </div>
            </el-card>
        </el-col>

        <el-col>
            <el-card shadow="always">
                <div class="myCard">

                    <!---table1-->
                    <el-table :data="InfoOfFlight"
                              style="width: 80%;margin-top: 20px"
                              max-height="800">
                        <el-table-column label="航班号"
                                         width="100"
                                         sortable
                                         :sort-method="sortBy1">
                            <template slot-scope="scope">
                                <b>{{ scope.row.flightsId}}</b>
                            </template>
                        </el-table-column>
                        <el-table-column label="航班路线"
                                         width="250"
                                         align="center"
                                         align="center">
                            <template slot-scope="scope">
                                {{scope.row.airportUpName}}&nbsp;-&nbsp;{{scope.row.airportDownName}}
                            </template>
                        </el-table-column>
                        <el-table-column label="航班日期(始发当地时间)"
                                         width="200"
                                         sortable
                                         align="center"
                                         :sort-method="sortBy2">
                            <template slot-scope="scope">
                                <i class="el-icon-time"></i>
                                <span style="margin-left: 10px">{{ scope.row.date|timeStampFilter }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="航班时刻"
                                         width="300"
                                         align="center">
                            <template slot-scope="scope">
                                <el-row>
                                    <el-col>
                                        实际起飞&nbsp;-&nbsp;
                                        <i class="fa fa-lg">{{scope.row.actUpTime | timeFilter}}</i>
                                    </el-col>
                                    <el-col>
                                        实际着陆&nbsp;-&nbsp;
                                        <i class="fa fa-lg">{{scope.row.actDownTime | timeFilter}}</i>
                                    </el-col>
                                </el-row>
                                <el-row>&nbsp;&mdash;&nbsp;</el-row>
                                <el-row>
                                    <el-col>
                                        计划起飞&nbsp;-&nbsp;
                                        <i class="fa fa-lg">{{scope.row.planUpTime | timeFilter}}</i>
                                    </el-col>
                                    <el-col>
                                        计划着陆&nbsp;-&nbsp;
                                        <i class="fa fa-lg">{{scope.row.planDownTime | timeFilter}}</i>
                                    </el-col>
                                </el-row>
                            </template>
                        </el-table-column>
                        <el-table-column label="航班状态"
                                         width="80"
                                         align="center">
                            <template slot-scope="scope">
                                <el-tag v-show="scope.row.state=='计划'">{{scope.row.state}}</el-tag>
                                <el-tag v-show="scope.row.state=='取消'" type="danger">{{scope.row.state}}</el-tag>
                                <el-tag v-show="scope.row.state=='到达'" type="success">{{scope.row.state}}</el-tag>
                            </template>
                        </el-table-column>
                    </el-table>

                </div>
            </el-card>
        </el-col>
    </div>
</div>
<div class="footer">
    <el-container>
        <el-footer>
            <el-row :gutter="20">
                <el-col :span="10" :offset="10">
                    <div class="footer-inner">
                        <div class="copyright">&copy; 2019 &mdash; <span itemprop="copyrightYear">2020</span>
                            <span class="with-love">
                                    <i class="fa fa-thumbs-o-up"></i>
                                </span>
                            <span class="author" itemprop="copyrightHolder">WYX & CZT</span>
                        </div>
                        <label style="margin-left: 0px;">整合SpringMVC + Mybatis + Shiro &mdash;
                            简易的航空票务系统</label>
                    </div>
                </el-col>
            </el-row>
        </el-footer>
    </el-container>
</div>
</body>
<script type="text/javascript" src="../static/vue/vue.js"></script>
<script type="text/javascript" src="../static/element-ui/lib/index.js"></script>
<script type="text/javascript" src="../static/vue/vue-resource.js"></script>
<script type="text/javascript" src="../static/vue/vue-router.js"></script>
<script type="text/javascript" src="../static/js/flightSearch.js"></script>
</html>